<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="shortcut icon" href="__IMG__/favicon.ico" />
		<link rel="bookmark" href="__IMG__/favicon.ico" type="image/x-icon" 　/>
		<title>开奖</title>
		<link rel="stylesheet" type="text/css" href="__CSS__/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/common.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/index.css"/>
		<script src="__JS__/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.ch{
				border-radius: 1%!important;
				color: #fff;
				border-right:3px;
				padding:0 2px;
			}
			.round_box i{
				width: 25px;
				height:25px;
				border-radius: 50%;
				background: #15C0FE;
				color: #fff;
				text-align: center;
				line-height: 25px;
			}
			.no_back{
				background: #fff !important;
			}
			.six_c{
				color: black !important;
			}
			.right_4{
				margin-right: 4px;
			}
		</style>
	</head>
	<body class="bg_ff">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">{$return_data['cate_name']}</h1>
		</header>
		<div class="mui-content bg_ff inner">
			<input type="hidden" id="my_cate" value="{$return_data['cate']}">
			<input type="hidden" id="page" value="{$return_data['now_page']}">
			{foreach $return_data['trend'] as $k=>$v}
		    <dl class="bor_b padding_10 " >
		    	<dt>第{$v['stage']}期({$v['dateline']})</dt>
		    	<dd class="mui-h4 blue">
		    		<p class="round_box blue">
						{if $return_data['cate']<=2}
						    {foreach $v['number'] as $kk=>$vv}
						       {if $kk==2}
						          <i>{$vv}</i>=
						       {elseif $kk==3}
						          <i>{$vv}</i>
						       {else/}
						          <i>{$vv}</i>+
						       {/if}
						    {/foreach}
						{elseif $return_data['cate']==11}
							{foreach $v['number'] as $kk=>$vv}
								{if $kk==6}
								+<i class="six_c round six_{$vv|getColor}">{$vv}</i>
								{else/}
								<i class="six_c round six_{$vv|getColor}">{$vv}</i>
								{/if}
							{/foreach}
						{elseif $return_data['cate']==3 || $return_data['cate']==4}
								{foreach $v['number'] as $kk=>$vv}
								<i class="ch bg_{$vv}">{$vv}</i>
								{/foreach}
						{elseif $return_data['cate']==9}
								{foreach $v['number'] as $kk=>$vv}
						<i class="no_back"><img height="25px" src="__IMG__/fast{$vv}.png"></i>
								{/foreach}
						{else/}
						    {foreach $v['number'] as $kk=>$vv}
						          <i>{$vv}</i>
						    {/foreach}
						{/if}
					</p>
		    		<p class="red">{$v['detail']}</p>
		    	</dd>
		    </dl>
			{/foreach}
		</div>
	</body>
	<script src="__JS__/zepto.min.js"></script>
	<script src="__JS__/dropload.min.js"></script>
	<script>
        Array.prototype.in_array = function (element) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == element) {
                    return true;
                }
            } return false;
        };
        function getColor(number){
            var red  = [1,2,7,8,12,13,18,19,23,24,28,30,34,35,40,45,46];
            var blue = [3,4,9,10,14,15,20,25,26,31,36,37,41,42,47,48];
            var green = [5,6,7,11,16,17,21,22,27,29,32,33,38,39,43,44,49];
            if(red.in_array(number)){
                return 'red';
            }else if (blue.in_array(number)){
                return 'blue';
            }else if (green.in_array(number)){
                return 'green';
            }else{
                return '0';
            }

        }
		var stop=true;
		$(window).scroll(function(){
			totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
			if($(document).height() <= totalheight){
				var my_cate = $('#my_cate').val();
				var page = parseInt($('#page').val())+1;
				$.ajax({
					type: 'GET',
					url: "{:url('lottery/history_api')}",
					data:{'page':page,'cate':my_cate},
					dataType: 'json',
					success: function(data){
						var cate = data.data.cate;
						var my   = data.data.trend;
						var now_page = data.data.now_page;
						var result = '';
						for(var i = 0; i < my.length; i++){
							result +=   "<dl class='bor_b padding_10'>"
								+"<dt>第"+my[i].stage+"期("+my[i].dateline+")</dt>"
								+"<dd class='mui-h4 blue'>"
								+"<p class='round_box blue'>";
									if(cate<=2) {
                                        for (var j = 0; j < my[i].number.length; j++) {
                                            if (j == 2) {
                                                result += "<i class='right_4'>" + my[i].number[j] + "</i>" + "=";
                                            } else if (j == 3) {
                                                result += "<i class='right_4'>" + my[i].number[j] + "</i>";
                                            } else {
                                                result += "<i class='right_4'>" + my[i].number[j] + "</i>" + "+";
                                            }
                                        }
                                    }else if(cate==3 || cate==4){
										for(var j=0;j<my[i].number.length;j++){
											result += "<i class='right_4 ch bg_"+my[i].number[j]+"'>"+my[i].number[j]+"</i>";
											}
									}else if(cate==11) {
                                        for (var j = 0; j < my[i].number.length; j++) {
                                            if (j == 6) {
                                                result += "+<i class='right_4 six_c round six_"+getColor(my[i].number[j])+"'>" + my[i].number[j] + "</i>";
                                            } else {
                                                result += "<i class='right_4 six_c round six_"+getColor(my[i].number[j])+"'>" + my[i].number[j] + "</i>";
                                            }
                                        }
                                    }else if(cate==9){
                                            for(var j=0;j<my[i].number.length;j++){
                                              result += "<i class='right_4 no_back'><img height='25px' src='__IMG__/fast"+ my[i].number[j] +".png'></i>";
                                            }
									}else{
										for(var j=0;j<my[i].number.length;j++){
											result +="<i class='right_4'>"+my[i].number[j]+"</i>"
										}
									}
							result +="</p>"
								+"<p class='red'>"+my[i].detail+"</p>"
								+"</dd>"
								+"</dl>";
							$('#page').val(now_page)
						}

						// 为了测试，延迟1秒加载
						setTimeout(function(){
							$('.inner').append(result);
							// 每次数据加载完，必须重置
						},1000);
					},
					error: function(xhr, type){
						alert('Ajax error!');
						// 即使加载出错，也得重置
						dropload.resetload();
					}
				});
			}
		});
	</script>
</html>
